<template>
  <div style="background-color: #DBEAFE;">
    <div class="full-screen-container w-[1440px] mx-auto px-8 py-6 ">
      <!-- 选择职业方向 -->
      <div class="bg-white rounded-xl p-0 shadow-sm border border-gray-100">
        <div class="flex items-center ml-12 pt-[20px]">
          <img src="https://ai-public.mastergo.com/ai/img_res/bd1da46bd43df6e7de5f29844780d29f.jpg" alt="Logo"
            class="w-10 h-10" />
          <span class="ml-3 text-xl font-semibold tracking-tight">人才画像系统</span>
        </div>
        <div class="max-w-3xl mx-auto">
          <div class="text-center mb-12">
            <h1 class="text-3xl font-semibold mb-4 tracking-tight">
              选择您感兴趣的岗位方向
            </h1>
            <p class="text-gray-600">
              请选择您感兴趣的职业方向，我们将为您生成专属的职业画像，助您找到理想的职业发展路径
            </p>
          </div>

          <!-- 动态生成岗位卡片 -->
          <div class="grid grid-cols-3 gap-6 mb-6">
            <jobCard v-for="(job, index) in jobs" :key="index" :iconClass="job.iconClass" :bgClass="job.bgClass"
              :title="job.title" :description="job.description" @selectJob="handleJobSelect" />
          </div>

          <!-- 进度条和按钮 -->
          <div class="bg-gray-50 rounded-lg p-6 mb-6">
            <div class="mb-4">
              <div class="progress-bar-bg">
                <div class="progress-bar" :style="{ width: progressBarWidth }"></div>
              </div>
            </div>
            <div class="flex justify-between items-center text-sm">
              <div class="flex items-center text-gray-600">
                <i class="fas fa-clock mr-2 text-primary"></i>
                <span>已完成 {{ currentStep }}/2 步</span>
              </div>
              <div class="flex items-center">
                <span class="w-2 h-2 rounded-full bg-primary mr-2"></span>
                <span class="text-gray-600">岗位方向选择</span>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="flex justify-between items-center">
            <button
              class="px-8 py-3 bg-primary text-white hover:bg-primary/90 rounded-md whitespace-nowrap flex items-center ml-auto"
              style="background-color: #4080FF; border-color: #4080FF;" @click="goNext">
              继续下一步
              <i class="fas fa-arrow-right ml-2"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router"; // 导入 vue-router 用于页面跳转
import jobCard from "./jobCard.vue"; // 引入岗位卡片组件


const router = useRouter(); // 使用 router 实例

// 进度条和步骤控制
const progressBarWidth = ref("50%");
const currentStep = ref(1);

// 默认岗位数据
const defaultJobs = [
  {
    iconClass: "iconfont icon-riLine-cpu-line",
    bgClass: "bg-tech",
    title: "技术研发",
    description: "包含软件开发、架构设计、算法等岗位",
  },
  {
    iconClass: "iconfont icon-shejichuangyi",
    bgClass: "bg-design",
    title: "设计创意",
    description: "包含视觉设计、交互设计、用户研究等岗位",
  },
  {
    iconClass: "iconfont icon-tubiaozhizuomoban_fuzhi",
    bgClass: "bg-product",
    title: "产品运营",
    description: "包含产品经理、运营策划、数据分析等岗位",
  },
  {
    iconClass: "iconfont icon-marketing",
    bgClass: "bg-sales",
    title: "市场销售",
    description: "包含市场营销、商务拓展、品牌推广等岗位",
  },
  {
    iconClass: "iconfont icon-renliziyuan",
    bgClass: "bg-hr",
    title: "人力资源",
    description: "包含人才招聘、培训发展、薪酬福利等岗位",
  },
  {
    iconClass: "iconfont icon-caiwuhangzhenglei",
    bgClass: "bg-finance",
    title: "财务行政",
    description: "包含财务管理、行政支持、法务等岗位",
  },
];

const jobs = ref([...defaultJobs]);

// 存储已选择的岗位
const selectedJobs = reactive([]);

// 处理岗位选择
function handleJobSelect({ selected, ...job }) {
  if (selected) {
    selectedJobs.push(job);  // 添加选择
  } else {
    const index = selectedJobs.findIndex(j => j.title === job.title);  // 根据title来查找
    if (index !== -1) {
      selectedJobs.splice(index, 1);  // 取消选择
    }
  }
}

// 更新进度条宽度
function updateProgress() {
  progressBarWidth.value = `${(currentStep.value / 2) * 100}%`;
}

// 继续下一步，跳转到下一页，并传递选中的岗位数据和进度条状态
function goNext() {
  if (currentStep.value < 3) {
    currentStep.value++;
    updateProgress();
    router.push({
      name: "skillStrengths",
      query: {
        jobs: JSON.stringify(selectedJobs.value),
        currentStep: currentStep.value,  // 传递当前步骤
      },
    });
  }
}
</script>

<!-- 自定义样式 -->
<style scoped>
body {
  min-height: 1024px;
  background-color: #f5f7fa;
  font-family: "Inter", sans-serif;
}

.progress-bar {
  height: 6px;
  background: linear-gradient(90deg, #4080ff 0%, #87b1ff 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: #e5e6eb;
  border-radius: 3px;
}

.job-card {
  transition: all 0.3s ease;
}

.job-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bg-selected {
  background-color: #4080FF !important;
  /* 选中时的背景色 */
  border: 2px solid #87b1ff;
  color: white;
}

.job-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.bg-tech {
  background: linear-gradient(135deg, #4080ff 0%, #87b1ff 100%);
}

.bg-design {
  background: linear-gradient(135deg, #ff6b6b 0%, #ffa3a3 100%);
}

.bg-product {
  background: linear-gradient(135deg, #845ef7 0%, #b197fc 100%);
}

.bg-sales {
  background: linear-gradient(135deg, #40c057 0%, #8ce99a 100%);
}

.bg-hr {
  background: linear-gradient(135deg, #f76707 0%, #ffb366 100%);
}

.bg-finance {
  background: linear-gradient(135deg, #1098ad 0%, #66d9e8 100%);
}

/* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
.full-screen-container {
  width: 100vw;
  /* 浏览器窗口的宽度 */
  height: 100vh;
  /* 浏览器窗口的高度 */
  background-color: #ffffff;
  /* 可以选择合适的背景色 */
  margin: 0;
  /* 去除默认的外边距 */
  padding: 0;
  /* 去除默认的内边距 */
}

/* 如果有特定的样式应用于 .body，可以考虑调整 */
.body {
  width: 100%;
}
</style>
